<template>
  <div>
    <pre>
    定义 
    局部自定义指令
    directives:{ 名字(xxx):{ 
        inserted:指令所在标签渲染完成后执行
        inserted(dom,obj){
           dom:指令所在dom  ,
           obj:{
            value:值
           }
        }，
        componentUpdated:指令所在组件有更新且更新完成后执行
        componentUpdated(dom,obj){
          dom:指令所在dom
          obj:{
            value
          }
        }
      } } 
    全局自定义指令  
      main.js
      Vue.directive('名字',{指令的生命周期})

全局组件注册:Vue.component(组件名,导入的组件)
         局部   components:{}


    使用 v-名字="值"
    </pre>
    <h2>{{ color }}</h2>
    <button @click="color = '#00ff00'">修改color</button>
    <!-- 使用了自定义指令，值改变了，你要自己渲染 -->
    <div v-xxx="color">123</div>
    <!-- 需求：输入框渲染完成就聚焦 -->
    <input v-focus type="text" />
    <input type="text" v-model="xxx" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      color: '#ff0000',
      xxx: ''
    }
  },
  directives: {
    xxx: {
      inserted (dom, obj) {
        console.log(dom)
        dom.style.color = obj.value
        console.log(obj.value)
      },
      componentUpdated (dom, obj) {
        dom.style.color = obj.value
      }
    }
  }
}
</script>
<style></style>
